<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<s-empty v-if="state.list.length === 0" icon="/static/order-empty.png" text="暂无课程"></s-empty>
		<view v-if="state.list.length > 0">
			<!-- <s-course-category
				@update:selected="handleCategoryChange"
			/> -->
			<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="item in state.list"
				:key="item.id">
				<view class="ss-order-card-warp ss-flex ss-col-stretch bg-white">
					<view class="img-box ss-m-r-24">
						<image class="order-img" :src="sheep.$url.cdn(item.gkkcourse.image)" mode="widthFix"
							width="100%"></image>
					</view>
					<view class="box-right ss-flex-col ss-row-between">
						<view class="title-text ss-line-2 ss-m-b-20">{{ item.gkkcourse.title }}</view>
						<view class="title-tips ss-flex ss-m-b-20">
							<view class="ss-flex ss-m-r-60">
								<text>主讲人：</text>
								<text>{{item.gkkcourse.teacher_name || '计划社名师'}}</text>
							</view>
							<view class="ss-flex">
								<text>直播时间：</text>
								<text>{{sheep.$helper.timeFormat(item.gkkcourse.start_time, 'yyyy-mm-dd hh:MM')}}</text>
							</view>
						</view>
						<view v-if="(item.all_lessons || []).filter(item => item.lesson_type == '2').length > 0"
							class="download-btn ss-flex" @tap="openMaterialDownloadPopup(item)">
							<uni-icons type="download" size="16" color="var(--ui-BG-Main)"></uni-icons>下载资料
						</view>
					</view>
					<view class="right  ss-m-l-10">
						<view class="study-btn info-color pending"  v-if="item.live_set_status==1">待直播</view>
						<view class="study-btn info-color playing" @tap="navigatorToZhibo(item)" v-else-if="item.live_set_status==2">即将直播</view>
						<view class="study-btn info-color playing" @tap="navigatorToZhibo(item)" v-if="item.live_set_status==3">直播中</view>
						<view class="study-btn info-color" @click="navigatorToZhibo(item)">回放</view>
					</view>
				</view>
			</view>
		</view>
		<download-material ref="downloadPopup" :materials="materialsList" />
	</s-layout>
</template>

<script setup>
	import DownloadMaterial from '../components/download-material.vue';

	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';

	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);

	const handleCategoryChange = (selection) => {
		state.category1 = selection.category1;
		state.category2 = selection.category2;
		state.year = selection.year;
		getUserGkk();
	}

	// 数据
	const state = reactive({
		list: [],
		loadStatus: '',
		error: 0,
		category1: undefined,
		category2: undefined,
		year: undefined,
	});

	const materialsList = ref([]);
	const downloadPopup = ref(null);
	const openMaterialDownloadPopup = (row) => {
		materialsList.value = row.all_lessons.filter(item => item.lesson_type == '2');
		if (materialsList.value.length > 0) {
			downloadPopup.value.showPopup();
		}
	}

	// 获取订单列表
	async function getUserGkk() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.getUserGkk({
			category1: state.category1,
			category2: state.category2,
			year: state.year,
		});
		state.error = res.error;
		if (res.code === 1) {
			state.list = res.data;
		}
	}

	onLoad(async (options) => {
		getUserGkk();
	});


	function navigatorToZhibo(lesson) {	
		console.log(lesson.lesson_id)
		let params = {
			id: lesson.goods_id
		};
		if(lesson.live_set_status==0){
			if(lesson.lesson_id === undefined || lesson.lesson_id === ''){
				sheep.$helper.toast('回放视频上传中')
			}else{
				params.recordId = lesson.lesson_id;
				sheep.$router.go('/pages/course/huifang', params)
			}
		}
		if(lesson.live_set_status==2 || lesson.live_set_status==3){
			sheep.$router.go('/pages/course/zhibo', params)
		}
	}
</script>

<style lang="scss" scoped>
	.right {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5px;
	}
	.ss-order-card-warp {
		padding: 20px 20px 30px 10px;
		border-bottom: 1px solid #eaeaea;

		.img-box {
			width: 104rpx;
			height: auto;
			overflow: hidden;

			.order-img {
				max-width: 100%;
				height: auto;
				border-radius: 6rpx;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 18px;
			font-weight: 500;
			line-height: 22px;
			color: #222;
		}

		.title-tips {
			font-size: 14px;
			margin-top: 5px;
			color: #666666;
		}
	}

	.download-btn {
		cursor: pointer;
		color: var(--ui-BG-Main);
	}

	.study-btn {
		border: 1px solid #fbb58a;
		border-radius: 3px;
		color: #ff6000;
		font-size: 14px;
		width: 110px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor:pointer;
	}

	.btn-learn-over {
		background-color: #ccc;
	}
	.pending{
			border: 1px solid #eeeeee;
			color: #7d7b7b;
	}
	.playing {
		background-color: #ff6000;
		color: #FFF;
		border: none;
		border: 1px solid #f0bb9b;
	}
</style>